<!--
 * @Descripttion: 
 * @Version: 
 * @Author: kangluon
 * @Date: 2020-06-27 13:32:49
 * @LastEditors: kangluon
 * @LastEditTime: 2020-06-27 15:03:08
-->
<template>
  <div class="steps">
    <ul>
      <!-- 
        :style="{ width: `${100 / stepList.length}%` }" -->
      <li class="li" v-for="(item, index) in stepList" :key="index">
        <div class="step-line">
          <span
            class="left-line line"
            :class="isFinsh(index + 1, 'line')"
          ></span>
          <div class="center-round" :class="isFinsh(index + 1, 'center-round')">
            <div
              class="small-round"
              :class="isFinsh(index + 1, 'small-round')"
            ></div>
          </div>
          <span class="right-line line" :class="isFinsh(index + 1, 'line')">
            <span
              class="arrow"
              :class="isFinsh(index + 1, 'arrow')"
              v-if="index < stepList.length - 1"
            ></span>
          </span>
        </div>
        <div class="step-name" :class="isFinsh(index + 1, 'step-name')">
          {{ item.label }}
        </div>
        <verticalStep
          :list="item.chilren"
          :parentClass="parentClass(index + 1)"
          :step="chilrenStep"
        />
      </li>
    </ul>
  </div>
</template>

<script>
import verticalStep from "./verticalStep";
export default {
  components: {
    verticalStep
  },
  data() {
    return {
      parentStep: 3,
      chilrenStep: 3,
      stepList: [
        {
          label: "调查组进驻前",
          chilren: [
            {
              label: "进驻申请"
            },
            {
              label: "房间分配"
            },
            {
              label: "角色分配"
            },
            {
              label: "创建案件"
            }
          ]
        },
        {
          label: "调查组进驻前",
          chilren: [
            {
              label: "进驻申请"
            },
            {
              label: "房间分配"
            },
            {
              label: "角色分配"
            },
            {
              label: "创建案件"
            }
          ]
        },
        {
          label: "调查组进驻前",
          chilren: [
            {
              label: "进驻申请"
            },
            {
              label: "房间分配"
            },
            {
              label: "角色分配"
            },
            {
              label: "创建案件"
            }
          ]
        },
        {
          label: "调查组进驻前",
          chilren: [
            {
              label: "进驻申请"
            },
            {
              label: "房间分配"
            },
            {
              label: "角色分配"
            },
            {
              label: "创建案件"
            }
          ]
        },
        {
          label: "调查组进驻前",
          chilren: [
            {
              label: "进驻申请"
            },
            {
              label: "房间分配"
            },
            {
              label: "角色分配"
            },
            {
              label: "创建案件"
            }
          ]
        }
      ]
    };
  },
  created() {},
  methods: {
    parentClass(index) {
      if (index < this.parentStep) {
        return `finish`;
      } else if (index === this.parentStep) {
        return `active`;
      } else {
        return `wait`;
      }
    },
    isFinsh(index, className) {
      if (index < this.parentStep) {
        return `finish-${className}`;
      } else if (index === this.parentStep) {
        return `active-${className}`;
      } else {
        return `wait-${className}`;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$finish: rgba(114, 181, 236, 1);
$finish-8: rgba(114, 181, 236, 0.8);
$finish-5: rgba(114, 181, 236, 0.5);

$active: rgba(30, 48, 212, 1);
$active-8: rgba(30, 48, 212, 0.8);
$active-5: rgba(30, 48, 212, 0.5);

$wait: rgba(53, 56, 59, 1);
$wait-5: rgba(53, 56, 59, 0.5);
$wait-8: rgba(53, 56, 59, 0.8);

.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: nowrap;
  display: block;
}
.steps {
  position: relative;
  ul {
    padding: 0px;
    margin: 0px;
    display: flex;
    align-items: center;
  }
  .li {
    list-style: none;
    display: inline-block;
    flex: 1;
    width: 0%;
    .step-line {
      display: flex;
      align-items: center;
      .line {
        flex: 1;
        width: 0%;
        height: 1px;
      }
      .finish-line {
        background: $finish;
      }
      .active-line {
        background: $active;
      }
      .wait-line {
        background: $wait;
      }
      .right-line.active-line {
        background: $wait;
      }
      .right-line {
        position: relative;
        .arrow {
          position: absolute;
          right: -8px;
          top: -8px;
          border-right: 8px solid transparent;
          border-bottom: 8px solid transparent;
          border-top: 8px solid transparent;
        }
        .finish-arrow {
          border-left: 8px solid $finish;
        }
        .active-arrow {
          border-left: 8px solid $wait;
        }
        .wait-arrow {
          border-left: 8px solid $wait;
        }
      }
      .center-round {
        width: 30px;
        height: 30px;
        padding: 15px;
        border-radius: 50%;
      }
      .finish-center-round {
        background: $finish-5;
        border: 1px solid $finish-8;
      }
      .active-center-round {
        background: $active-5;
        border: 1px solid $active-8;
      }
      .wait-center-round {
        background: $wait-5;
        border: 1px solid $wait-8;
      }
      .small-round {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
      .finish-small-round {
        background: $finish;
      }
      .active-small-round {
        background: $active;
      }
      .wait-small-round {
        background: $wait;
      }
    }
    .step-name {
      text-align: center;
      position: relative;
      padding-top: 8px;
      &::after {
        position: absolute;
        content: "";
        left: calc(50% - 8px);
        bottom: -22px;
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
        border-bottom: 8px solid transparent;
      }
    }
    .finish-step-name {
      &::after {
        border-top: 8px solid $finish;
      }
    }
    .active-step-name {
      &::after {
        border-top: 8px solid $active;
      }
    }
    .wait-step-name {
      &::after {
        border-top: 8px solid $wait;
      }
    }
  }
}
</style>
